<template>
  <div>
    <div class="title">患者列表</div>
    <a-input
      v-model="searchVal"
      class="inputBox"
      placeholder="请输入患者姓名或住院号关键词"
      allow-clear
      @input="inpueChange"
    />
    <a-table
      :columns="columns"
      :data="data"
      column-resizable
      :bordered="{ cell: true }"
      :row-class="rowClassName"
      @row-click="cellClick"
    ></a-table>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';

const searchVal = ref('');
const selectId = ref(111);

const columns = reactive([
  {
    title: '床位',
    dataIndex: 'bed',
    tooltip: true,
  },
  {
    title: '姓名',
    dataIndex: 'name',
    tooltip: true,
  },
  {
    title: '住院号',
    dataIndex: 'num',
    tooltip: true,
  },
]);
const data = ref([]);
const emit = defineEmits(['click']);
const inpueChange = (e) => {
  const list = [
    {
      id: 111,
      bed: 18,
      name: '陈杰',
      num: 'ZY300016',
      dept: '呼吸内科',
      sex: '男',
      age: '35岁21天',
      feibie: '自费',
      riqi: '2023-10-05',
      tianshu: '1天',
      tizhong: '68kg',
      zhenduan: '上呼吸道疾病，鼻塞，流鼻涕，打喷嚏，气短呼吸困难',
      jiwangshi: '无',
      guominshi: '皮肤过敏',
      jiazushi: '无',

      xingzhi: 1,
      time: '2023-03-05 00:00:00',
      shuoming: '佛山市大家好返的数据返回呢',

      detailsList: [
        {
          id: 1,
          serialNumber: 1,
          itemCode: 'SH002',
          itemName: '血常规',
          indexCode: 'ZB001',
          indexName: '白细胞',
          upperLimit: '10.0×10⁹/L',
          lowerLimit: '4.0×10⁹/L',
        },
        {
          id: 2,
          serialNumber: 2,
          itemCode: 'SH002',
          itemName: '血常规',
          indexCode: 'ZB002',
          indexName: '红细胞',
          upperLimit: '5.8×10¹²/L',
          lowerLimit: '4.3×10¹²/L',
        },
        {
          id: 3,
          serialNumber: 3,
          itemCode: 'SH003',
          itemName: '肝功能',
          indexCode: 'ZB003',
          indexName: '谷丙转氨酶',
          upperLimit: '40 U/L',
          lowerLimit: '5 U/L',
        },
      ],

      yizhu: 'YZ202310235156',
      huanzheID: 'HZ202204245',
      doctor: '吴衙萍',
      IDCard: '35058219******0158',
      tianbaoNum: 'JHTB20231020156',
      tianbaoTime: '2023-10-20 15:15:12',
      xiazhuTime: '2023-10-20 15:13:10',
    },
    {
      id: 222,
      bed: 23,
      name: '韩乔欣',
      num: 'ZY300030',

      dept: '咽喉科',
      sex: '女',
      age: '60岁13天',
      feibie: '自费',
      riqi: '2023-10-20',
      tianshu: '2天',
      tizhong: '68kg',
      zhenduan: '鼻塞，流鼻涕，打喷嚏，呼吸道感染',
      jiwangshi: '无',
      guominshi: '无',
      jiazushi: '无',

      xingzhi: 2,
      time: '2023-03-15 00:00:00',
      shuoming: '活动开始返回呢新密码栏',

      detailsList: [
        {
          id: 1,
          serialNumber: 1,
          itemCode: 'SH001',
          itemName: '血常规',
          indexCode: 'ZB001',
          indexName: '白细胞',
          upperLimit: '10.2×10⁹/L',
          lowerLimit: '4.2×10⁹/L',
        },
        {
          id: 2,
          serialNumber: 2,
          itemCode: 'SH002',
          itemName: '血常规',
          indexCode: 'ZB002',
          indexName: '红细胞',
          upperLimit: '5.9×10¹²/L',
          lowerLimit: '4.6×10¹²/L',
        },
        {
          id: 3,
          serialNumber: 3,
          itemCode: 'SH003',
          itemName: '肝功能',
          indexCode: 'ZB003',
          indexName: '谷丙转氨酶',
          upperLimit: '20 U/L',
          lowerLimit: '15 U/L',
        },
      ],

      yizhu: 'YZ202310235157',
      huanzheID: 'HZ202203214',
      doctor: '吴衙萍',
      IDCard: '35058219******1245',
      tianbaoNum: 'JHTB20231012472',
      tianbaoTime: '2023-10-12 11:10:58',
      xiazhuTime: '2023-10-12 11:05:47',
    },
  ].filter(
    (item) =>
      !searchVal.value ||
      item.name.includes(searchVal.value) ||
      item.num.includes(searchVal.value)
  );
  data.value = list;
};
const cellClick = (row) => {
  selectId.value = row.id;
  emit('click', { type: 'sele', data: row });
};
const rowClassName = (record) => {
  return record.id === selectId.value ? 'activeRowLight' : '';
};
inpueChange();
cellClick(data.value[0]);
</script>

<style lang="less" scoped>
.title {
  text-align: center;
  font-size: 18px;
  color: #fff;
  background-color: #63a103;
  padding: 8px;
  margin-bottom: 15px;
}
.inputBox {
  padding: 4px 8px;
  margin-bottom: 15px;
}

/* 覆盖arco.design默认表头样式 */
:deep(.arco-table-th) {
  background-color: #dceac6 !important;
  border-bottom-color: #98c059;
  transition: background-color 0.3s ease;
}

:deep(.arco-table-th:hover) {
  background-color: #dceac6 !important;
}

:deep(.activeRowLight > .arco-table-td) {
  background-color: #98c059 !important;
}
</style>
